Automatically focus inputs, or the primary button, in modals. #2974

psybers · 2024-07-03T14:48:44Z

Working so that modals will automatically focus the first input, or for confirmation-style modals, autofocus the "primary" button so you can just hit ENTER when it pops up (or ESC).

There are two React Aria button refactoring PRs remaining. It looks like #2915 has no overlap. This PR should be merged after #3163 as it conflicts on one file:

packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx

netlify · 2024-07-03T14:48:59Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`5101582`
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/66bd19145cc4f1000846cca3
😎 Deploy Preview	https://deploy-preview-2974.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2024-07-03T14:49:59Z

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
9	4.94 MB → 4.95 MB (+1.42 kB)	+0.03%

Changeset

File	Δ	Size
`src/components/modals/ConfirmTransactionDelete.tsx`	📈 +117 B (+6.38%)	1.79 kB → 1.91 kB
`src/components/modals/ConfirmUnlinkAccount.tsx`	📈 +115 B (+5.66%)	1.98 kB → 2.1 kB
`src/components/modals/ConfirmTransactionEdit.tsx`	📈 +121 B (+3.40%)	3.48 kB → 3.6 kB
`src/components/modals/GoCardlessInitialise.tsx`	📈 +117 B (+3.05%)	3.75 kB → 3.87 kB
`src/components/schedules/ScheduleLink.tsx`	📈 +107 B (+3.01%)	3.47 kB → 3.57 kB
`src/components/reports/SaveReportDelete.tsx`	📈 +39 B (+2.97%)	1.28 kB → 1.32 kB
`src/components/manager/ImportYNAB4.tsx`	📈 +33 B (+1.08%)	2.98 kB → 3.01 kB
`src/components/manager/ImportYNAB5.tsx`	📈 +33 B (+1.07%)	3 kB → 3.03 kB
`src/components/modals/SimpleFinInitialise.tsx`	📈 +29 B (+1.00%)	2.84 kB → 2.87 kB
`src/components/manager/ImportActual.tsx`	📈 +33 B (+0.96%)	3.37 kB → 3.41 kB
`src/components/schedules/PostsOfflineNotification.jsx`	📈 +31 B (+0.88%)	3.45 kB → 3.48 kB
`src/components/manager/WelcomeScreen.tsx`	📈 +33 B (+0.80%)	4.01 kB → 4.04 kB
`src/components/modals/CreateAccountModal.tsx`	📈 +119 B (+0.80%)	14.57 kB → 14.69 kB
`src/components/modals/ConfirmCategoryDelete.tsx`	📈 +36 B (+0.75%)	4.7 kB → 4.74 kB
`src/components/select/RecurringSchedulePicker.jsx`	📈 +115 B (+0.69%)	16.25 kB → 16.37 kB
`src/components/accounts/AccountSyncCheck.jsx`	📈 +35 B (+0.69%)	4.95 kB → 4.99 kB
`src/components/modals/GoCardlessExternalMsg.tsx`	📈 +60 B (+0.65%)	8.97 kB → 9.03 kB
`src/components/accounts/Reconcile.jsx`	📈 +29 B (+0.62%)	4.59 kB → 4.62 kB
`src/components/modals/MergeUnusedPayees.jsx`	📈 +33 B (+0.51%)	6.27 kB → 6.3 kB
`src/components/modals/CloseAccountModal.tsx`	📈 +43 B (+0.45%)	9.3 kB → 9.35 kB
`src/components/schedules/ScheduleDetails.jsx`	📈 +121 B (+0.41%)	28.97 kB → 29.08 kB
`src/components/accounts/Account.jsx`	📈 +27 B (+0.06%)	42.65 kB → 42.68 kB
`src/components/modals/ImportTransactions.jsx`	📈 +31 B (+0.06%)	50.19 kB → 50.22 kB
`src/components/mobile/transactions/TransactionEdit.jsx`	📉 -1 B (-0.00%)	32.51 kB → 32.51 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/index.js	3.22 MB → 3.22 MB (+1.33 kB)	+0.04%
static/js/wide.js	241.46 kB → 241.51 kB (+56 B)	+0.02%
static/js/ReportRouter.js	1.24 MB → 1.24 MB (+39 B)	+0.00%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/narrow.js	77.55 kB	0%
static/js/usePreviewTransactions.js	790 B	0%
static/js/AppliedFilters.js	27.55 kB	0%

github-actions · 2024-07-03T14:50:00Z

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	1.14 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1.14 MB	0%

MatissJanis · 2024-07-09T18:28:04Z

This is cool, but @joel-jeremy is currently refactoring the Button component to react-aria. So perhaps lets hold off on this until his migration is complete?

github-actions · 2024-07-26T01:52:20Z

👋 Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review.

psybers · 2024-08-06T00:07:18Z

@joel-jeremy Do you have all of the react button refactoring PRs in now?

matt-fidd · 2024-08-13T01:29:55Z

@psybers I believe the relevant react aria button PRs are in now, there's one tiny conflict left.

psybers · 2024-08-13T01:36:52Z

@matt-fidd Conflicts resolved.

matt-fidd · 2024-08-14T18:17:11Z

packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx

-              >
-                Delete
-              </Button>
+              <InitialFocus>


@psybers - I'm not questioning you on this, just a learning moment for me as I get to better grips with React. Why is this one wrapped in instead of an autofocus prop?

This uses the focus() call on the element, after a short delay. Which is needed in some cases.

matt-fidd · 2024-08-14T18:46:19Z

Will leave this for a day for any other opinions before I merge it.

Automatically focus inputs, or the primary button, in modals.

d204141

github-actions bot added the 🚧 WIP label Jul 3, 2024

psybers added 5 commits July 3, 2024 10:00

Set focus on more modals.

48e73c2

focus mobile transaction edits

bd94dfc

add release note

4695676

fix linter

8854161

Merge branch 'master' into autofocus

e568671

psybers changed the title ~~[WIP] Automatically focus inputs, or the primary button, in modals.~~ Automatically focus inputs, or the primary button, in modals. Jul 3, 2024

github-actions bot added 🔍 Ready for Review and removed 🚧 WIP labels Jul 3, 2024

psybers changed the title ~~Automatically focus inputs, or the primary button, in modals.~~ [WIP] Automatically focus inputs, or the primary button, in modals. Jul 10, 2024

github-actions bot added 🚧 WIP and removed 🔍 Ready for Review labels Jul 10, 2024

psybers added 2 commits July 10, 2024 14:53

Merge branch 'master' into autofocus

388094c

fix linter

e12f892

youngcw removed the 🚧 WIP label Jul 17, 2024

psybers changed the title ~~[WIP] Automatically focus inputs, or the primary button, in modals.~~ Automatically focus inputs, or the primary button, in modals. Jul 18, 2024

actual-github-bot bot added the 🔍 Ready for review label Jul 18, 2024

psybers changed the title ~~Automatically focus inputs, or the primary button, in modals.~~ [WIP] Automatically focus inputs, or the primary button, in modals. Jul 18, 2024

actual-github-bot bot added 🚧 WIP and removed 🔍 Ready for review labels Jul 18, 2024

github-actions bot added the Stale label Jul 26, 2024

joel-jeremy removed the Stale label Jul 29, 2024

Merge branch 'master' into autofocus

dea466e

psybers force-pushed the autofocus branch from aa9c973 to dea466e Compare August 4, 2024 02:44

psybers added 2 commits August 4, 2024 17:52

Merge branch 'master' into autofocus

25e1160

Merge branch 'master' into autofocus

e561c95

psybers added 2 commits August 6, 2024 09:49

Merge branch 'master' into autofocus

0a9c252

Merge branch 'master' into autofocus

0747357

psybers changed the title ~~[WIP] Automatically focus inputs, or the primary button, in modals.~~ Automatically focus inputs, or the primary button, in modals. Aug 7, 2024

actual-github-bot bot added 🔍 Ready for review and removed 🚧 WIP labels Aug 7, 2024

psybers added 4 commits August 7, 2024 08:15

Merge branch 'master' into autofocus

376d277

Merge branch 'master' into autofocus

eb31c39

Merge branch 'master' into autofocus

8a3fdc8

Merge branch 'master' into autofocus

522f90a

Merge branch 'master' into autofocus

f68221c

psybers added 2 commits August 13, 2024 21:38

Merge branch 'master' into autofocus

a2422b8

Merge branch 'master' into autofocus

9295aa7

matt-fidd reviewed Aug 14, 2024

View reviewed changes

matt-fidd approved these changes Aug 14, 2024

View reviewed changes

actual-github-bot bot added ✅ Approved and removed 🔍 Ready for review labels Aug 14, 2024

Merge branch 'master' into autofocus

5101582

matt-fidd merged commit 5e3485a into actualbudget:master Aug 15, 2024
19 checks passed

actual-github-bot bot added ✨ Merged and removed ✅ Approved labels Aug 15, 2024

matt-fidd mentioned this pull request Aug 29, 2024

[Bug]: Reconciliation box closing immediately when using return key to open #3330

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatically focus inputs, or the primary button, in modals. #2974

Automatically focus inputs, or the primary button, in modals. #2974

psybers commented Jul 3, 2024 •

edited

Loading

netlify bot commented Jul 3, 2024 •

edited

Loading

github-actions bot commented Jul 3, 2024 •

edited

Loading

github-actions bot commented Jul 3, 2024 •

edited

Loading

MatissJanis commented Jul 9, 2024

github-actions bot commented Jul 26, 2024

psybers commented Aug 6, 2024

matt-fidd commented Aug 13, 2024

psybers commented Aug 13, 2024

matt-fidd Aug 14, 2024

psybers Aug 14, 2024

matt-fidd commented Aug 14, 2024

Automatically focus inputs, or the primary button, in modals. #2974

Automatically focus inputs, or the primary button, in modals. #2974

Conversation

psybers commented Jul 3, 2024 • edited Loading

netlify bot commented Jul 3, 2024 • edited Loading

✅ Deploy Preview for actualbudget ready!

github-actions bot commented Jul 3, 2024 • edited Loading

Bundle Stats — desktop-client

github-actions bot commented Jul 3, 2024 • edited Loading

Bundle Stats — loot-core

MatissJanis commented Jul 9, 2024

github-actions bot commented Jul 26, 2024

psybers commented Aug 6, 2024

matt-fidd commented Aug 13, 2024

psybers commented Aug 13, 2024

matt-fidd Aug 14, 2024

Choose a reason for hiding this comment

psybers Aug 14, 2024

Choose a reason for hiding this comment

matt-fidd commented Aug 14, 2024

psybers commented Jul 3, 2024 •

edited

Loading

netlify bot commented Jul 3, 2024 •

edited

Loading

github-actions bot commented Jul 3, 2024 •

edited

Loading

github-actions bot commented Jul 3, 2024 •

edited

Loading